<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="50%"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-form label-position="top" :model="form" ref="form" label-width="100px">
      <el-row>
        <el-col :span="8"
          ><el-form-item label="评分等级"></el-form-item
        ></el-col>
        <el-col :span="10"><el-form-item label="分数"></el-form-item></el-col>
        <el-col :span="4"></el-col>
      </el-row>
      <el-row
        v-loading="loading"
        v-for="(item, index) in form.evaluationScoreItems"
        :key="index"
      >
        <el-col :span="8">
          <el-form-item
            :key="item.id"
            :prop="'evaluationScoreItems.' + index + '.scoreLevel'"
            :rules="{
              required: true,
              message: '评分等级不能为空',
              trigger: ['blur'],
            }"
          >
            <el-input v-model="item.scoreLevel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item
            :key="item.id"
            :prop="'evaluationScoreItems.' + index + '.itemScore'"
            :rules="{
              required: true,
              message: '分数不能为空',
              trigger: ['blur'],
            }"
          >
            <el-input v-model.number="item.itemScore"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button @click.prevent="removeDomain(item)">删除</el-button>
        </el-col>
      </el-row>

      <el-form-item style="float: right">
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="addDomain"
          >添加</el-button
        >
        <el-button size="mini" @click="resetForm2('form')">重置</el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { searchEvaluationScoreItemList, editEvaluationScoreItem } from "@/api/study/evaluationScoreItem";

export default {
  name: "EvaluationScoreItemEdit",
  components: {
  },
  data() {
    return {
      loading: true,
      // 表单参数
      form: {
        evaluationScoreItems: [],
        delevaluationScoreItems: []
      }
    };
  },
  created() {
    this.getList();
  },
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    /** 初始化编辑的数据**/
    initData(rowData) {
      this.reset();
      if (rowData && rowData.id) {
        this.form = rowData;
        this.form.datetimerange = [this.form.startTime, this.form.endTime]
      }
    },
    /** 取消按钮 */
    cancel() {
      this.$emit('update:show', false)
      this.getList();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        evaluationScoreItems: [],
        delevaluationScoreItems: []
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }

        //保存操作
        editEvaluationScoreItem(this.form).then(response => {
          this.$modal.msgSuccess("保存成功");
          this.cancel();
          this.$emit('success')
        });
      });
    },


    getList() {
      this.loading = true;
      // 执行查询
      searchEvaluationScoreItemList({}).then(response => {
        this.form.evaluationScoreItems = response.data;
        this.form.delevaluationScoreItems = [];
        this.loading = false;
      });
    },


    resetForm2(formName) {
      // this.$refs[formName].resetFields();
      this.getList();
    },
    removeDomain(item) {
      var index = this.form.evaluationScoreItems.indexOf(item)
      if (index !== -1) {
        this.form.evaluationScoreItems.splice(index, 1);
      }
      if (item.id) {
        this.form.delevaluationScoreItems.push(item.id);
      }
    },
    addDomain() {
      this.form.evaluationScoreItems.push({
        id: '',
        scoreLevel: '',
        itemScore: ''
      });
    }

  }
};
</script>

<style scoped>
.el-form-item {
  margin-right: 50px;
}
</style>
